import React, { PureComponent } from 'react';
import echarts from 'echarts/lib/echarts';
import 'echarts/lib/chart/bar';
import 'echarts/lib/chart/line';
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
import 'echarts/lib/component/legend';
import 'echarts/lib/component/toolbox';
import 'echarts/lib/component/markPoint';
import 'echarts/lib/component/markLine';
import $ from 'jquery';
import moment from 'moment';



class DeviceModelCurve extends PureComponent {

    componentDidMount() {

        const deviceModelCurve={
            xParameter:{
                name:"负荷",
                unit:"%"
            },
            yParameter:{
                name:"功率",
                unit:"kW"
            },
            xData:[1, 2, 2, 3, 4, 5, 5, 6, 7,  8, 9,10],
           
        };
        const farkyData=[];
        const yRealData=[];
        deviceModelCurve.xData.map((item,index)=>{
            farkyData.push(item*item);
            yRealData.push(item*item*Math.random());
        });
        deviceModelCurve.yData=farkyData;
       

        const { id } = this.props;
        const that = this;
        echarts.dispose(document.getElementById(id));
        const myChart = echarts.init(document.getElementById(id));
        that.loadChart(myChart,deviceModelCurve,yRealData);
    }

    componentWillUnmount() {
        $(window).unbind('resize', chartIndexAvgResizing)
    }


    loadChart(myChart,deviceModelCurve,yRealData) {
        $(window).unbind('resize', chartIndexAvgResizing)
        var option = getChartOption(deviceModelCurve,yRealData);
        myChart.setOption(option);
        $(window).bind('resize', { chart: myChart }, chartIndexAvgResizing)
    }

    render() {
        const { id } = this.props;
        return (
            <div id={id} style={{ width: '100%', minHeight: '250px' }} />
        );
    }
}

export default DeviceModelCurve;


function chartIndexAvgResizing(e) {
    if (e.data.chart) {
        e.data.chart.resize();
    } else {
        return;
    }
}

function getChartOption(deviceModelCurve,yRealData) {
    const colors = ['#5BC0EB', '#E55934', '#9BC53D', '#69306D', '#FCBF49'];
    const option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                crossStyle: {
                    color: '#9ABCC3'
                }
            }
        },
        legend: {
            data: ["理论"+deviceModelCurve.yParameter.name,"实际"+deviceModelCurve.yParameter.name]
        },
        xAxis: {
            type: 'category',
            data: deviceModelCurve.xData,
            name: deviceModelCurve.xParameter.name,
            axisLabel: {
                formatter: '{value}'+deviceModelCurve.xParameter.unit
            }
        },
        yAxis: {
            type: 'value',
            name: deviceModelCurve.yParameter.name,
            axisLabel: {
                formatter: '{value}'+deviceModelCurve.yParameter.unit
            }
        },
        series: [{
            data: deviceModelCurve.yData,
            type: 'line',
            name:  "理论"+deviceModelCurve.yParameter.name,
            itemStyle: {
                color: colors[0]
            },
        },
        {
            data: yRealData,
            name:  "实际"+deviceModelCurve.yParameter.name,
            type: 'line',
            itemStyle: {
                color: colors[1]
            },
        }],
        grid: {
            left: 60
        },
    };
    console.log(option);
    return option;
}
